<template>
  <div class="CommissionOfficial">
    <div class="banner">
      <img src="~assets/images/newpage-image/official-banner.jpg" alt="" />
      <div class="banner-text">
        <Button class="btn" type="primary">
          <router-link to="/official" class="btn2">发布委托</router-link>
        </Button>
      </div>
    </div>
    <div class="container top-container">
      <div class="top">
        <div class="desc">
          <div class="title">一站式数智化包装供应链解决方案</div>
          <div class="txt">
            找包装网遍访全国包装制造企业，借助大数据赋能，打造了全行业最先进的数字化包装产业互联平台，成为众多知名品牌公司首选的包装研发与供应链合作伙伴。
          </div>
        </div>
        <div class="pic-box">
          <img src="~assets/images/newpage-image/official-toppic.png" alt="" />
        </div>
      </div>
    </div>
    <div class="good-serve">
      <div class="container">
        <h3>
          <img src="~assets/images/newpage-image/otittle-bg.png" alt="" />
        </h3>
        <div class="tab">
          <div
            class="tab-item"
            @click="change(0)"
            :class="{ active: 0 === number }"
          >
            <div class="icon">
              <i></i>
            </div>
            <div class="name">资深项目团队</div>
          </div>
          <div
            class="tab-item"
            @click="change(1)"
            :class="{ active: 1 === number }"
          >
            <div class="icon"><i></i></div>
            <div class="name">覆盖行业广</div>
          </div>
          <div
            class="tab-item"
            @click="change(2)"
            :class="{ active: 2 === number }"
          >
            <div class="icon"><i></i></div>
            <div class="name">大数据赋能</div>
          </div>
          <div
            class="tab-item"
            @click="change(3)"
            :class="{ active: 3 === number }"
          >
            <div class="icon"><i></i></div>
            <div class="name">透明可追溯</div>
          </div>
          <div
            class="tab-item"
            @click="change(4)"
            :class="{ active: 4 === number }"
          >
            <div class="icon"><i></i></div>
            <div class="name">一站式托管</div>
          </div>
        </div>
        <div class="show-box">
          <div class="item1 item" v-show="0 == number">
            <div class="pic-box">
              <img src="~assets/images/newpage-image/official-pic.png" alt="" />
            </div>
            <div class="desc">
              <p class="title">平均10年以上资深项目团队</p>
              <p>
                我们为每一个项目精心组建了专业的项目团队，项目经理均来自行业头部品牌公司或包装制造企业，平均拥有10年以上从业经验，不负每一个委托。
              </p>
            </div>
          </div>
          <div class="item1 item" v-show="1 == number">
            <div class="pic-box">
              <img
                src="https://img.pkg.cn/image/work/1616748431605d9f8f46a78_4501x8001.jpg?x-oss-process=image/resize,m_lfit,w_1272"
                alt=""
              />
            </div>
            <div class="desc">
              <p class="title">覆盖行业广</p>
              <p>
                找包装网依托行业数十年发展，汇聚了庞大的供应链资源，与数千优质供应商深度合作，覆盖快消品、食品、饮料、传媒、工业品、电气电子等30余个行业。
              </p>
            </div>
          </div>
          <div class="item1 item" v-show="2 == number">
            <div class="pic-box">
              <img
                src="https://img.pkg.cn/image/work/1617778475606d572b70c2c_5376x2484.jpg?x-oss-process=image/resize,m_lfit,w_1272"
                alt=""
              />
            </div>
            <div class="desc">
              <p class="title">大数据赋能</p>
              <p>
                凭借平台沉淀的海量产业链大数据，我们为每一个项目量身定制最佳方案，确保每一个产品的质量、价格、交期满足客户需求，助力项目实现端到端的成本最优。
              </p>
            </div>
          </div>
          <div class="item1 item" v-show="3 == number">
            <div class="pic-box">
              <img
                src="https://img.pkg.cn/image/work/1617777286606d5286979d3_2762x4356.jpg?x-oss-process=image/resize,m_lfit,w_1272"
                alt=""
              />
            </div>
            <div class="desc">
              <p class="title">透明可追溯</p>
              <p>
                找包装网托管服务采用全透明化管理，实现了项目任意节点和全流程的可追溯。找包装网正成为越来越多的初创企业、中大型企业可信赖的合作伙伴。
              </p>
            </div>
          </div>
          <div class="item1 item" v-show="number == 4">
            <div class="pic-box">
              <img
                src="https://img.pkg.cn/image/work/1617776729606d5059df1bb_1302x2480.png?x-oss-process=image/resize,m_lfit,w_1272"
                alt=""
              />
            </div>
            <div class="desc">
              <p class="title">一站式托管</p>
              <p>
                找包装网打造全生命周期管理的研发与供应链一站式项目托管服务，帮助品牌摆脱沉重的管理负担，让品牌释放更多创造力，在市场的红海中一路领先。
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="middle-panel">
      <div class="container">
        <div class="top">
          <div class="pic-box">
            <img src="~assets/images/newpage-image/map.png" alt="" />
          </div>
          <div class="desc">
            <h3>立足中国，服务全球</h3>
            <i class="line"></i>
            <p class="txt">
              找包装网致力于更好、更快、更便捷地服务全球品牌公司
            </p>
            <div class="num-box">
              <ul>
                <li>
                  <p class="num"><span class="counter-value">3000</span>+</p>
                  <p>制造企业</p>
                </li>
                <li>
                  <p class="num"><span class="counter-value">600</span>+</p>
                  <p>服务品牌</p>
                </li>
                <li>
                  <p class="num"><span class="counter-value">200</span>+</p>
                  <p>包装类别</p>
                </li>
                <li>
                  <p class="num"><span class="counter-value">350</span>+</p>
                  <p>服务企业</p>
                </li>
                <li>
                  <p class="num">
                    <span class="counter-value">800</span>M <span>pcs</span>
                  </p>
                  <p>可匹配月产能</p>
                </li>
                <li>
                  <p class="num"><span class="counter-value">150000</span>+</p>
                  <p>产品库</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="step">
          <div class="title">
            <img
              src="~assets/images/newpage-image/need-titleicon1.png"
              alt=""
            />
            <h3>官方委托流程</h3>
            <img
              src="~assets/images/newpage-image/need-titleicon2.png"
              alt=""
            />
          </div>
          <div class="step-box">
            <div class="step1 step-item">
              <div class="step-desc">
                <img src="~assets/images/newpage-image/num1.png" alt="" />
                <div class="desc">
                  <h4>填写基本信息</h4>
                  <p>选择所需的产品或服务，按照平台模板填写基本信息。</p>
                </div>
              </div>
              <div class="pic">
                <img src="~assets/images/newpage-image/need-step1.png" alt="" />
              </div>
            </div>
            <div class="step2 step-item">
              <div class="pic">
                <img
                  src="~assets/images/newpage-image/ostep-icon2.png"
                  alt=""
                />
              </div>
              <div class="step-desc">
                <img src="~assets/images/newpage-image/num2.png" alt="" />
                <div class="desc">
                  <h4>提交委托</h4>
                  <p>
                    确认产品信息并发布委托，一键抵达找包装网后台中心，即刻为您搭建专业的项目团队。
                  </p>
                </div>
              </div>
            </div>
            <div class="step3 step-item">
              <div class="step-desc">
                <img src="~assets/images/newpage-image/num3.png" alt="" />
                <div class="desc">
                  <h4>平台提案</h4>
                  <p>
                    找包装网项目团队会在12小时内与您确认需求信息，在48小时内为您提供至少3套产品方案。
                  </p>
                </div>
              </div>
              <div class="pic">
                <img
                  src="~assets/images/newpage-image/ostep-icon3.png"
                  alt=""
                />
              </div>
            </div>
            <div class="step4 step-item">
              <div class="pic">
                <img src="~assets/images/newpage-image/need-step5.png" alt="" />
              </div>
              <div class="step-desc">
                <img src="~assets/images/newpage-image/num4.png" alt="" />
                <div class="desc">
                  <h4>确定合作</h4>
                  <p>
                    项目经过充分沟通和方案优化，双方确定合作意向，实现一站式项目托管。
                  </p>
                </div>
              </div>
            </div>
            <div class="step5">
              <Button
                class="btn-submit"
                type="primary"
                @click="$router.push({ name: 'Official' })"
                >发布委托</Button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="partner">
      <div class="container">
        <h3>合作品牌</h3>
        <p class="tips">期待您的垂询</p>
        <i class="line"></i>
        <div class="swiperpartner">
          <swiper class="swiper" :options="partnerSwiper">
            <swiper-slide
              class="partner-item"
              v-for="(item, index) in list"
              :key="index"
            >
              <div class="logo">
                <img :src="item.image" alt="" class="" />
              </div>
            </swiper-slide>
          </swiper>
          <div class="botton-icon">
            <div class="partner-pagination" slot="pagination"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"
import { Button } from "element-ui"
import { getPartner } from "@/api/supplier"
import $ from "jquery" //在需要使用的页面中

export default {
  name: "CommissionOfficial",
  data() {
    return {
      list: [],
      number: 0,
      partnerSwiper: {
        slidesPerView: 4,
        slidesPerColumn: 3,
        spaceBetween: 30,
        pagination: {
          el: ".partner-pagination",
          clickable: true
        }
      },
      isShow: true
    }
  },
  components: {
    swiper,
    swiperSlide,
    Button
  },
  created() {
    this.getPartnerList()
    window.addEventListener("scroll", this.windowScroll)
  },
  methods: {
    getPartnerList() {
      getPartner().then(res => {
        if (res.status === 200) {
          this.list = res.data.data
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    change(index) {
      this.number = index
    },
    windowScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      if (scrollTop >= 800 && this.isShow) {
        this.onready()
        this.isShow = false
      } else {
        return false
      }
    },
    onready() {
      $(document).ready(function() {
        $(".counter-value").each(function() {
          $(this).prop("Counter", 0).animate({Counter: $(this).text()},
          {
            duration: 3500,
            easing: "swing",
            step: function(now) {
              $(this).text(Math.ceil(now))
            }
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.CommissionOfficial {
  .banner {
    position: relative;
    img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      display: block;
    }
    .banner-text {
      width: 1200px;
      margin: 0 auto;
      position: absolute;
      top: 50%;
      left: 0;
      bottom: 0;
      right: 0;
    }
  }
  .top-container {
    padding: 92px 0 0;
    .top {
      display: flex;
      .desc {
        margin-right: 160px;
        color: #666;
        .title {
          font-size: 34px;
          margin-bottom: 33px;
          margin-top: 75px;
        }
        .txt {
          line-height: 27px;
          font-size: 18px;
        }
      }
    }
  }
  .good-serve {
    padding: 63px 0 72px;
    background: #f3f4f7;
    h3 {
      text-align: center;
    }
    .tab {
      display: flex;
      justify-content: space-between;
      margin: 32px 0 38px;
      .tab-item {
        width: 20%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
        &::before {
          content: "";
          position: absolute;
          top: 38%;
          left: 180px;
          width: 50%;
          height: 1px;
          border-top: 1px dashed #ffa664;
        }
        &:last-child {
          &::before {
            display: none;
          }
        }
        .icon {
          width: 87px;
          height: 87px;
          background: #ffffff;
          box-shadow: 0px 7px 9px 0px rgba(255, 173, 106, 0.11);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          i {
            display: block;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }
        .name {
          margin-top: 27px;
          font-size: 16px;
          color: #666;
          margin-left: 2px;
        }
        &:nth-of-type(1) {
          .icon {
            i {
              width: 39px;
              height: 37px;
              background-image: url("~@/assets/images/newpage-image/oicon1.png");
            }
          }
        }
        &:nth-of-type(2) {
          .icon {
            i {
              width: 35px;
              height: 40px;
              background-image: url("~@/assets/images/newpage-image/oicon2.png");
            }
          }
        }
        &:nth-of-type(3) {
          .icon {
            i {
              width: 34px;
              height: 34px;
              background-image: url("~@/assets/images/newpage-image/oicon3.png");
            }
          }
        }
        &:nth-of-type(4) {
          .icon {
            i {
              width: 36px;
              height: 34px;
              background-image: url("~@/assets/images/newpage-image/oicon4.png");
            }
          }
        }
        &:nth-of-type(5) {
          .icon {
            i {
              width: 41px;
              height: 35px;
              background-image: url("~@/assets/images/newpage-image/oicon5.png");
            }
          }
        }
        &.active {
          .icon {
            &::before {
              content: "";
              position: absolute;
              top: 3px;
              left: 50%;
              transform: translateX(-50%);
              width: 80px;
              height: 80px;
              border: 1px dashed #0085e8;
              border-radius: 50%;
            }
          }
          &:nth-of-type(1) {
            i {
              width: 39px;
              height: 37px;
              background-image: url("~@/assets/images/newpage-image/oicon-active1.png");
            }
          }
          &:nth-of-type(2) {
            i {
              width: 39px;
              height: 37px;
              background-image: url("~@/assets/images/newpage-image/oicon-active2.png");
            }
          }
          &:nth-of-type(3) {
            i {
              width: 39px;
              height: 37px;
              background-image: url("~@/assets/images/newpage-image/oicon-active3.png");
            }
          }
          &:nth-of-type(4) {
            i {
              width: 39px;
              height: 37px;
              background-image: url("~@/assets/images/newpage-image/oicon-active4.png");
            }
          }
          &:nth-of-type(5) {
            i {
              width: 39px;
              height: 37px;
              background-image: url("~@/assets/images/newpage-image/oicon-active5.png");
            }
          }
        }
      }
    }
    .show-box {
      width: 100%;
      height: 432px;
      background: #ffffff;
      box-shadow: 0px 0px 22px 0px rgba(164, 177, 181, 0.22);
      padding: 34px 30px 32px;
      .item {
        display: flex;
        img {
          width: 510px;
          height: 360px;
          object-fit: cover;
        }
        .desc {
          margin-left: 60px;
          p {
            font-size: 16px;
            color: #969696;
            line-height: 30px;
          }
          .title {
            font-size: 20px;
            color: #666;
            font-weight: bold;
            margin: 0px 0 0 0;
          }
        }
      }
    }
  }
  .middle-panel {
    padding: 112px 0 129px;
    .top {
      display: flex;
      flex: 1;
      .pic-box {
        margin-top: 20px;
      }
      .desc {
        color: #666;
        margin-left: 99px;
        h3 {
          font-size: 34px;
          font-weight: bold;
          margin-left: 43px;
        }
        .line {
          display: block;
          margin: 22px auto 15px;
          width: 45px;
          height: 3px;
          background: #ffa664;
        }
        .txt {
          font-size: 16px;
          color: #969696;
        }
        .num-box {
          ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 55px;
            li {
              width: 50%;
              text-align: center;
              margin-bottom: 45px;
              p {
                font-size: 16px;
              }
              .num {
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 6px;
              }
            }
          }
        }
      }
    }
    .step {
      padding: 93px 0 0;
      color: #666;
      .title {
        display: flex;
        justify-content: center;
        align-content: center;
        margin-bottom: 64px;
        h3 {
          font-size: 30px;
          margin: 0 21px;
        }
        img {
          height: 33px;
          margin-top: 4px;
        }
      }
      .step-box {
        .step-item {
          display: flex;
          justify-content: space-between;
          .step-desc {
            position: relative;
            margin-top: 68px;
            padding-left: 124px;
            img {
              position: absolute;
              top: 0;
              left: 0;
            }
            .desc {
              margin-top: 55px;
              h4 {
                font-size: 24px;
              }
              p {
                font-size: 18px;
                margin-top: 27px;
              }
            }
          }
          &:nth-of-type(2n) {
            .pic {
              margin-right: 157px;
            }
          }
        }
        .step1 {
          margin-bottom: 93px;
        }
        .step2 {
          margin-bottom: 20px;
        }
        .step3 {
          margin-bottom: 40px;
          .pic {
            margin-left: 137px;
          }
        }
        .step4 {
          .step-desc {
            margin-top: 97px;
          }
        }
        .step5 {
          margin-top: 40px;
          text-align: center;
          .btn-submit {
            width: 200px;
            height: 40px;
          }
        }
      }
    }
  }
  .partner {
    background: #f3f4f7;
    padding: 70px 0;
    h3 {
      font-size: 30px;
      color: #4d4d4d;
      text-align: center;
    }
    .tips {
      font-size: 16px;
      color: #4d4d4d;
      text-align: center;
      margin-top: 10px;
    }
    .line {
      display: block;
      width: 100%;
      height: 1px;
      background: #e9e9e9;
      margin: 40px 0;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-width: 20px;
        border-style: solid;
        border-color: transparent transparent #e9e9e9 transparent;
      }
      &::after {
        content: "";
        position: absolute;
        top: -38.5px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-width: 20px;
        border-style: solid;
        border-color: transparent transparent #f3f4f7 transparent;
      }
    }
    .swiperpartner {
      .partner-item {
        width: 227px;
        height: 130px;
        background: #ffffff;
        border: 1px solid #e9e9e9;
        display: flex;
        justify-content: center;
        align-items: center;
        .logo {
          // width: 100%;
          // height: 100%;
          /* display: flex;
          align-items: center;
          justify-content: center; */
          img {
            width: 150px;
            height: 60px;
            object-fit: cover;
          }
        }
      }

      .botton-icon {
        position: relative;
        margin-top: 45px;
      }
      .swiper-container-multirow-column > .swiper-wrapper {
        flex-direction: row !important;
      }
      .partner-pagination {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      .partner-pagination /deep/ .swiper-pagination-bullet {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        margin-right: 16px;
        background: #969696;
        box-shadow: 0 0 6px rgba(150, 150, 150, 0.9);
        opacity: 1;
        outline: none;
      }
      .partner-pagination /deep/ .swiper-pagination-bullet-active {
        background: rgba(228, 139, 44, 0.9);
        box-shadow: 0 0 6px rgba(228, 139, 44, 0.9);
      }
    }
  }
}
</style>
